<template>
  <div class="pad-out-box">
    <form-common v-if="clientInfoFiledList.length > 0" :filed-list="clientInfoFiledList" ref="form"></form-common>
    <el-tabs v-model="activeName" @tab-click="tabClick">
      <el-tab-pane label="合同记录" name="contract" key="contract">
        <contract-record ref="contract"></contract-record>
      </el-tab-pane>
      <el-tab-pane label="空间租赁记录" name="space" key="space">
        <lease-record ref="space"></lease-record>
      </el-tab-pane>
      <el-tab-pane label="广告投放记录" name="advertise" key="advertise">
        <advertise-record ref="advertise"></advertise-record>
      </el-tab-pane>
      <el-tab-pane label="无人设备投放记录" name="unequipment" key="unequipment">
        <un-equipment-record ref="unequipment"></un-equipment-record>
      </el-tab-pane>
      <el-tab-pane label="临时场地使用记录" name="temporary" key="temporary">
        <temporary-venue-record ref="temporary"></temporary-venue-record>
      </el-tab-pane>
      <el-tab-pane label="共享空间使用记录" name="sharezSpace" key="sharezSpace">
        <shared-space-record ref="sharezSpace"></shared-space-record>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import formCommon from '@g/components/form/formCommon.vue';
  import { clientInfoFiledList } from './form';
  import Api from '../../api/clientManage';
  import merge from 'webpack-merge';
  import contractRecord from './tabPages/contractRecord';
  import leaseRecord from './tabPages/leaseRecord';
  import advertiseRecord from './tabPages/advertiseRecord';
  import unEquipmentRecord from './tabPages/unEquipmentRecord';
  import temporaryVenueRecord from './tabPages/temporaryVenueRecord';
  import sharedSpaceRecord from './tabPages/sharedSpaceRecord';
  import $ from 'jquery';

  export default {
    data() {
      return {
        clientInfoFiledList: [],
        model: {},
        activeName: 'contract',
      };
    },

    mounted() {
      this.getClientInfo();
      this.setActiveName();
      let headerName = localStorage.getItem("headerName")
      $('.logo').html(headerName)
    },

    methods: {
      //客户信息
      async getClientInfo() {
        let res = await Api.queryInformation({ customerKey: this.$route.query.customerKey });
        this.model = res;
        this.setFiledVal(clientInfoFiledList, res);
        this.clientInfoFiledList = clientInfoFiledList;
      },

      tabClick() {
        this.changeType(this.activeName);
        this.$nextTick(() => {
          this.$refs[this.activeName].getInfo();
        });
      },

      //设置ActiveName
      setActiveName() {
        if (!this.$route.query.tab) {
          this.changeType('contract');
        }
        this.activeName = this.$route.query.tab;
        this.$nextTick(() => {
          console.log(this.$refs);
          this.$refs[this.activeName].getInfo();
        });
      },
      //更新路由参数
      changeType(name) {
        if (this.$route.query.tab == name) {
          return false;
        }

        this.$router.replace({
          query: merge(this.$route.query, { tab: name }),
        });
      },

      //字段回显
      setFiledVal(list, row) {
        list.forEach(item => {
          for (let i in row) {
            if (i == item.bindFieldName) {
              item.bindFieldVal = row[i];
            }
          }
        });
      },
    },

    destroyed() {
      localStorage.removeItem("headerName")
    },

    components: { formCommon, contractRecord, leaseRecord, advertiseRecord, unEquipmentRecord, temporaryVenueRecord, sharedSpaceRecord },
  };
</script>
<style scoped type="scss">
  ::v-deep .el-form .el-form-item__label {
    padding-left: 0;
  }
</style>
